<template>
  <a-card :bordered="false" style='margin-top: -20px;'>
    <!-- 查询区域 -->
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <!-- table区域-begin -->
    <template>
      <!-- 关联对象类型(1:班级;2:教室,3:老师;4:科目,5:学生) -->

        <a-row >
          <a-col :span="3">
            <a-button v-print="'#modal-body-print'" ghost type="primary">打印</a-button>
            <a-button ghost type="primary"  @click='print'>转图片</a-button>
            <!--            <div class="no-print" style="text-align: right">-->
            <!--              <a-button v-print="'#printContent'" ghost type="primary">打印</a-button>-->
            <!--            </div>-->
          </a-col>
          <a-col :span="4">
          <a-checkbox-group v-model:value="relObjTtype" value='4'  @change='relObjTtypeChange'>
<!--            显示的对象类型：与字典码保持一致：字典码 course_target_obj_ttype 课表目标对象类型 -->
<!--            1-班级(默认)	1，2-教室场地	2，3-老师	3，4-科目	4，5-学生	5   -->
            <a-checkbox value="4">科目</a-checkbox>
            <a-checkbox value="3">老师</a-checkbox>
            <a-checkbox value="2">教室</a-checkbox>
          </a-checkbox-group>
          </a-col>
          <a-col :span="8">
            <label >隐藏的序号</label>
            <a-input  v-model="courArraAtomSectionHidden" style="width: 50%" @change='courArraAtomSectionHiddenChange' ></a-input>
            <label >(隐藏课间操和眼保健操等)</label>
          </a-col>
<!--          <a-col :span="6">-->
<!--            &lt;!&ndash;            //隐藏的对象id，例如隐藏课间操和眼保健操 &ndash;&gt;-->
<!--            <a-checkbox-group v-model:value="relObjIdHidden" value='4'  @change='relObjIdHiddenChange'>-->
<!--&lt;!&ndash;              此处需配置与字典码的数据保持一致，字典码：cour_sch_tem_auto_flag 课表模板基本元素定义 &ndash;&gt;-->
<!--&lt;!&ndash;              早读	1,上午	2,中午	3,下午	4,大课间	5,晚自习	6,眼保健操	7,课间操	8,休息	9,不上课	10,空	0,社团活动	11&ndash;&gt;-->
<!--              <a-checkbox value="8">隐藏课间操</a-checkbox>-->
<!--              <a-checkbox value="7">隐藏眼保健操</a-checkbox>-->
<!--              <a-checkbox value="4">隐藏大课间</a-checkbox>-->
<!--            </a-checkbox-group>-->
<!--          </a-col>-->
          <a-col :span="8">
            <span style="float:right;">
          <a @click="loadData()"><a-icon type="sync" />刷新</a>
          <a-divider type="vertical" />
          <a-popover title="自定义列" trigger="click" placement="leftBottom">
            <template slot="content">
              <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
                <a-row style="width: 400px">
                  <template v-for="(item,index) in defColumns">
                    <template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
                        <a-col :span="12"><a-checkbox :value="item.dataIndex"><j-ellipsis :value="item.title" :length="10"></j-ellipsis></a-checkbox></a-col>
                    </template>
                  </template>
                </a-row>
              </a-checkbox-group>
            </template>
            <a><a-icon type="setting" />设置</a>
          </a-popover>
        </span>
          </a-col>
        </a-row>

    </template>

      <div id="modal-body-print">
        <div style='text-align: center;color: #4b4b4b;font-size: 20px;padding-bottom:10px;font-weight: bold;'>{{ classname }}</div>
        <a-table
          ref="table"
          style='margin-right: 30px;'
          size="middle"
          :scroll="{x:true}"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading">

          <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
        </span>
        </a-table>
      </div>

<!--    <v-cou-course-arrange-atom-modal ref="modalForm" @ok="modalFormOk"></v-cou-course-arrange-atom-modal>-->
  </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { deleteAction, getAction, putAction } from '@api/manage'
// import VCouCourseArrangeAtomModal from './modules/VCouCourseArrangeAtomModal'
import html2canvas from 'html2canvas'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
import Vue from 'vue'

export default {
  //课程表预览
  name: 'PreviewCourseArrangeDetails',
  mixins:[JeecgListMixin, mixinDevice],
  components: {
    // VCouCourseArrangeAtomModal
  },
  data () {
    return {
      description: 'v_cou_course_arrange_atom管理页面',
      disableMixinCreated : true, //默认初始状态不加载数据

      /* 分页参数 */
      ipagination:{
        current: 1,
        pageSize: 20,
        pageSizeOptions: ['20', '30', '50'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
      showQuickJumper: true,
      showSizeChanger: true,
      total: 0
    },

      //列设置:已选列
      settingColumns:[
        {
          title: '序号',
          dataIndex: 'courArraAtomSection',
          // key:'rowIndex',
          width:35,
          align:"center",
          // customRender:function (t,r,index) {
          //   return parseInt(index)+1;
          // }
        },
        {
          title:'节次',
          align:"center",
          width:100,
          dataIndex: 'courArraAtomSectionname',
          //根据换行符换行显示
          customRender: (text, record, index) => {
            const arraAtomMonday = text.split('\n')
            return (
              arraAtomMonday.map(item => {
                // return (<li style='font-weight: bold;'>{item}</li>)
                return (<li>{item}</li>)
              })
            )
          }
        },
        {
          title:'星期一',
          align:"center",
          dataIndex: 'arraAtomMonday',
          ellipsis: true,
          //根据换行符换行显示
          customRender: (text, record, index) => {
            const arraAtomMonday = text.split('\n')
            return (
              arraAtomMonday.map(item => {
                // return (<li style='font-weight: bold;'>{item}</li>)
                return (<li>{item}</li>)
              })
            )
          }
        },
        {
          title:'星期二',
          align:"center",
          dataIndex: 'arraAtomTuseday',
          customRender: (text, record, index) => {
            const arraAtomTuseday = text.split('\n')
            return (
              arraAtomTuseday.map(item => {
                return (<li>{item}</li>)
              })
            )
          }
        },
        {
          title:'星期三',
          align:"center",
          dataIndex: 'arraAtomWednesday',
          customRender: (text, record, index) => {
            const arraAtomWednesday = text.split('\n')
            return (
              arraAtomWednesday.map(item => {
                return (<li>{item}</li>)
              })
            )
          }
        },
        {
          title:'星期四',
          align:"center",
          dataIndex: 'arraAtomThursday',
          customRender: (text, record, index) => {
            const arraAtomThursday = text.split('\n')
            return (
              arraAtomThursday.map(item => {
                return (<li>{item}</li>)
              })
            )
          }
        },
        {
          title:'星期五',
          align:"center",
          dataIndex: 'arraAtomFriday',
          customRender: (text, record, index) => {
            const arraAtomFriday = text.split('\n')
            return (
              arraAtomFriday.map(item => {
                return (<li>{item}</li>)
              })
            )
          }
        },

      ],
      //列设置：可选列
      defColumns: [
        {
          title: '序号',
          dataIndex: 'courArraAtomSection',
          // key:'rowIndex',
          width:35,
          align:"center",
          // customRender:function (t,r,index) {
          //   return parseInt(index)+1;
          // }
        },
        {
          title:'节次',
          align:"center",
          width:100,
          dataIndex: 'courArraAtomSectionname',
          //根据换行符换行显示
          customRender: (text, record, index) => {
            const arraAtomMonday = text.split('\n')
            return (
              arraAtomMonday.map(item => {
                // return (<li style='font-weight: bold;'>{item}</li>)
                return (<li>{item}</li>)
              })
            )
          }
        },
        {
          title:'星期一',
          align:"center",
          dataIndex: 'arraAtomMonday',
          ellipsis: true,
          //根据换行符换行显示
          customRender: (text, record, index) => {
            const arraAtomMonday = text.split('\n')
            return (
              arraAtomMonday.map(item => {
                // return (<li style='font-weight: bold;'>{item}</li>)
                return (<li>{item}</li>)
              })
            )
          }
        },
        {
          title:'星期二',
          align:"center",
          dataIndex: 'arraAtomTuseday',
          customRender: (text, record, index) => {
            const arraAtomTuseday = text.split('\n')
            return (
              arraAtomTuseday.map(item => {
                return (<li>{item}</li>)
              })
            )
          }
        },
        {
          title:'星期三',
          align:"center",
          dataIndex: 'arraAtomWednesday',
          customRender: (text, record, index) => {
            const arraAtomWednesday = text.split('\n')
            return (
              arraAtomWednesday.map(item => {
                return (<li>{item}</li>)
              })
            )
          }
        },
        {
          title:'星期四',
          align:"center",
          dataIndex: 'arraAtomThursday',
          customRender: (text, record, index) => {
            const arraAtomThursday = text.split('\n')
            return (
              arraAtomThursday.map(item => {
                return (<li>{item}</li>)
              })
            )
          }
        },
        {
          title:'星期五',
          align:"center",
          dataIndex: 'arraAtomFriday',
          customRender: (text, record, index) => {
            const arraAtomFriday = text.split('\n')
            return (
              arraAtomFriday.map(item => {
                return (<li>{item}</li>)
              })
            )
          }
        }
        ,
        {
          title:'星期六',
          align:"center",
          dataIndex: 'arraAtomSaturday',
          hidden: true,
          customRender: (text, record, index) => {
            const arraAtomSaturday = text.split('\n')
            return (
              arraAtomSaturday.map(item => {
                return (<li>{item}</li>)
              })
            )
          }
        },
        {
          title:'星期天',
          align:"center",
          dataIndex: 'arraAtomSunday',
          hidden: false,
          customRender: (text, record, index) => {
            const arraAtomSunday = text.split('\n')
            return (
              arraAtomSunday.map(item => {
                return (<li>{item}</li>)
              })
            )
          }
        }

      ],
      // 表头
      columns: [],
      url: {
        //课表详情
        // list: "/coursearrangeatom/couCourseArrangeAtom/#",  ////重写loadData,解决资源没找到的问题，list无用
        listByCourseArrangeId: "/coursearrangeatom/couCourseArrangeAtom/listByCourseArrangeId",
      },
      dictOptions:{},
      superFieldList:[],
      //ref部分
      objectModel: {},
      //课表详情
      dataSource:[],
      relObjTtype: ['4','3'],
      courArraAtomSectionHidden: "4,5,10",
      relObjIdHidden: [,'7','8'], //隐藏的对象id，例如隐藏课间操和眼保健操
      classname: "",
    }
  },
  created() {
    // this.getSuperFieldList();
    this.initColumns();
  },
  computed: {
    importExcelUrl: function(){
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
  },
  methods: {
    initDictConfig(){
    },
    //重写loadData,解决资源没找到的问题
    loadData(){
      this.getCouCourseArrange(this.objectModel.id);
    },
    // getSuperFieldList(){
    //   let fieldList=[];
    //   fieldList.push({type:'string',value:'courseArrangeId',text:'课表id'})
    //   fieldList.push({type:'string',value:'targetObjId',text:'目标对象id(班级id(默认)，场地id，老师id，科目id,学生id)，表示该课表应用对象'})
    //   fieldList.push({type:'int',value:'courArraAtomSection',text:'节次'})
    //   fieldList.push({type:'string',value:'courArraAtomSectionname',text:'节次名称'})
    //   fieldList.push({type:'string',value:'courArraAtomStartTime',text:'开始时间'})
    //   fieldList.push({type:'string',value:'courArraAtomEndTime',text:'结束时间'})
    //   fieldList.push({type:'int',value:'courArraAtomIzSingle',text:'单双周标识(1不分（默认），2单双循环 21单周 22双周 3三周循环 31 32 33三周循环第三周  4四周循环)'})
    //   fieldList.push({type:'string',value:'relObjNameEn',text:'关联对象类型英文名称（班级cou_class、教室fac_classroom、老师tea_teacher、科目cou_subject、学生stu_student）'})
    //   fieldList.push({type:'string',value:'relObjNameCn',text:'关联对象类型中文名称（班级cou_class、教室fac_classroom、老师tea_teacher、科目cou_subject、学生stu_student）'})
    //   fieldList.push({type:'int',value:'relObjTtype',text:'关联对象类型(1:班级;2:教室,3.老师;4.科目5学生)'})
    //   fieldList.push({type:'string',value:'arraAtomMonday',text:'arraAtomMonday'})
    //   fieldList.push({type:'string',value:'arraAtomTuseday',text:'arraAtomTuseday'})
    //   fieldList.push({type:'string',value:'arraAtomWednesday',text:'arraAtomWednesday'})
    //   fieldList.push({type:'string',value:'arraAtomThursday',text:'arraAtomThursday'})
    //   fieldList.push({type:'string',value:'arraAtomFriday',text:'arraAtomFriday'})
    //   fieldList.push({type:'string',value:'arraAtomSaturday',text:'arraAtomSaturday'})
    //   fieldList.push({type:'string',value:'arraAtomSunday',text:'arraAtomSunday'})
    //   fieldList.push({type:'string',value:'tenantId',text:'学校编码'})
    //   this.superFieldList = fieldList
    // },
    getOrderMain(record) {
      //已选的一条完整标准数据，需要其中的id、科目、部门
      this.objectModel = record //课表数据
      this.relObjTtype = ['4','3']
      this.relObjIdHidden = []; //隐藏的对象id，例如隐藏课间操和眼保健操
      this.getCouCourseArrange(this.objectModel.id);
    },
    relObjTtypeChange(){
      this.getCouCourseArrange(this.objectModel.id);
    },
    relObjIdHiddenChange(){
      this.getCouCourseArrange(this.objectModel.id);
    },
    courArraAtomSectionHiddenChange(){
      this.getCouCourseArrange(this.objectModel.id);
    },
    getCouCourseArrange(ccid){
      if(!ccid){
        return ;
      }
      let params = {
        courseArrangeId: ccid,
        relObjTtype: this.relObjTtype, //JSON.stringify(relObjTtype),
        relObjIdHidden: this.relObjIdHidden, // JSON.stringify(relObjIdHidden) //隐藏的对象id，例如隐藏课间操和眼保健操
        courArraAtomSectionHidden:this.courArraAtomSectionHidden
      }
      getAction(this.url.listByCourseArrangeId,params).then((res) => {
        if (res.success) {
          this.dataSource = []
          this.dataSource = res.result;
          let cname = this.dataSource[1].className
          this.classname = cname + " 课程表"
        } else {
          this.$message.warning(res.message);
        }
      });
    },


    //打印课表
    print () {
      this.contentH = 'auto'
      const modalElement = document.getElementById('modal-body-print');
      html2canvas(modalElement).then(function (canvas) {
        setTimeout(() => {
          let mywindow = window.open('', '', 'height=800,width=1000'); // 新的窗口
          mywindow.document.write(`
                          <html>
                          <head>
                              <title></title>
                              <style type="text/css">
                                  @page { margin: 0; } body{ padding-left: 20px;}
                              </style>
                          </head>
                          <body>`);
          // mywindow.document.write('<h2>' + document.title + '</h2>');
          mywindow.document.write(`<br><img src="${canvas.toDataURL()}"/>`);
          mywindow.document.write('</body></html>');
          mywindow.document.close(); //  IE >= 10 必要的兼容写法
          mywindow.focus(); //  IE >= 10*/ 必要的兼容写法
          // mywindow.print();
          this.contentH = 150
        }, 200)
      });
    },
    //动态列 script 1 ////////////////////////////////////////////////////////////////////////////////////////
    // 列设置更改事件
    onColSettingsChange (checkedValues) {
      var key = this.$route.name+":colsettings";
      Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000)
      this.settingColumns = checkedValues;
      const cols = this.defColumns.filter(item => {
        if(item.key =='rowIndex'|| item.dataIndex=='action'){
          return true
        }
        if (this.settingColumns.includes(item.dataIndex)) {
          return true
        }
        return false
      })
      this.columns =  cols;
    },

    initColumns(){
      //权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
      //this.defColumns = colAuthFilter(this.defColumns,'testdemo:');
      this.settingColumns = [];

      var key = this.$route.name+":colsettings";
      let colSettings= Vue.ls.get(key);
      if(colSettings==null||colSettings==undefined){
        let allSettingColumns = [];
        this.defColumns.forEach(function (item,i,array ) {
          allSettingColumns.push(item.dataIndex);
        })
        this.settingColumns = allSettingColumns;
        this.columns = this.defColumns;
      }else{
        this.settingColumns = colSettings;
        const cols = this.defColumns.filter(item => {
          if(item.key =='rowIndex'|| item.dataIndex=='action'){
            return true;
          }
          if (colSettings.includes(item.dataIndex)) {
            return true;
          }
          return false;
        })
        this.columns =  cols;
      }
    },

  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>